<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { MenuItem } from '@/layouts/menuNavBar'
import menuAside from '@/layouts/menuAside'
import { useMainStore } from '@/stores/main'
import { useStyleStore } from '@/stores/style'
import AsideMenu from '@/components/AsideMenu.vue'

useMainStore().setUser({
  name: 'Chan ZhaoYu',
  email: 'chenzhaoyu1994@gmail.com',
  avatar: 'https://avatars.githubusercontent.com/u/24789441?v=4',
})

const layoutAsidePadding = 'xl:pl-60'

const styleStore = useStyleStore()

const router = useRouter()

const isAsideMobileExpanded = ref(false)
const isAsideLgActive = ref(true)

router.beforeEach(() => {
  isAsideMobileExpanded.value = false
  isAsideLgActive.value = false
})

const menuClick = (event: MouseEvent, item: MenuItem) => {
  if (item.isToggleLightDark)
    styleStore.setDarkMode()

  if (item.isLogout) {
    //
  }
}
</script>

<template>
  <div
    :class="{
      'dark': styleStore.darkMode,
      'overflow-hidden lg:overflow-visible': isAsideMobileExpanded,
    }"
  >
    <div
      :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
      class="h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
    >
      <AsideMenu
        :is-aside-mobile-expanded="isAsideMobileExpanded"
        :is-aside-lg-active="isAsideLgActive"
        :menu="menuAside"
        @menu-click="menuClick"
        @aside-lg-close-click="isAsideLgActive = false"
      />
      <RouterView v-slot="{ Component, route }">
        <component :is="Component" :key="route.fullPath" />
      </RouterView>
    </div>
  </div>
</template>
